<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../public/bootstrap/dist/css/bootstrap.min.css">
</head>

<style>
    .title {
        text-align: center;
    }

    .btns {
        display: flex;
        justify-content: flex-end;
    }

    .form-content {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .form-left {
        width: 100%;
        padding: 20px;
    }

    .form-right {
        width: 100%;
        padding: 20px;
        border-left: 1px solid #dedede;
    }

    .header-form {
        margin-top: 30px;
    }
</style>

<body>
    <div class="container">
        <h2 class="title">四一班学生信息</h2>
        <div class="header-form">
            <form action="/student/search" method="POST" class="form-inline">
                <div class="form-group">
                    <label for="SearchName">姓名：</label>
                    <input type="text" class="form-control" id="SearchName" name="name" placeholder="请输入学生姓名">
                </div>
                <div class="form-group">
                    <label for="SearchClass">班级</label>
                    <select class="form-control" name="class">
                        <option value=""></option>
                        <option value="7.1">7.1</option>
                        <option value="7.2">7.2</option>
                        <option value="7.3">7.3</option>
                        <option value="8.1">8.1</option>
                        <option value="8.2">8.2</option>
                        <option value="8.3">8.3</option>
                        <option value="8.4">8.4</option>
                        <option value="9.1">9.1</option>
                        <option value="9.2">9.2</option>
                        <option value="9.3">9.3</option>
                        <option value="9.4">9.4</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">查找</button>
            </form>
        </div>
        <div class="btns">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                data-whatever="@mdo">添加</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ImportExcelModal"
                data-whatever="@mdo">导入</button>
            <input type="text" value="{{student.length > 1 ? student[0].name : '查无此人' }}">
        </div>
        {{if student.length>0}}
        <div class="table-responsive">
            <table class="table table-striped student-info-table">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>学生编号</td>
                        <td>姓名</td>
                        <td>班级</td>
                        <td>语文</td>
                        <td>数学</td>
                        <td>英语</td>
                        <td>政治</td>
                        <td>历史</td>
                        <td>地理</td>
                        <td>物理</td>
                        <td>化学</td>
                        <td>生物</td>
                        <td>总分</td>
                        <td>考试类型</td>
                        <td>编辑</td>
                    </tr>
                </thead>
                <tbody>
                    {{each student}}
                    <tr class="student-table-tr">
                        <td class="student-table-td-idx">{{$index+1}}</td>
                        <td class="student-table-td-sid">{{$value.sid}}</td>
                        <td class="student-table-td-name">{{$value.name}}</td>
                        <td class="student-table-td-class">{{$value.class}}</td>
                        <td class="student-table-td-chinese">{{$value.chinese}}</td>
                        <td class="student-table-td-math">{{$value.math}}</td>
                        <td class="student-table-td-english">{{$value.english}}</td>
                        <td class="student-table-td-politics">{{$value.politics}}</td>
                        <td class="student-table-td-history">{{$value.history}}</td>
                        <td class="student-table-td-geography">{{$value.geography}}</td>
                        <td class="student-table-td-physics">{{$value.physics}}</td>
                        <td class="student-table-td-chemistry">{{$value.chemistry}}</td>
                        <td class="student-table-td-biology">{{$value.biology}}</td>
                        <td class="student-table-td-totalscore">{{$value.totalScore}}</td>
                        <td class="student-table-td-title">{{$value.title}}</td>
                        <td>
                            <button type="button" class="btn btn-edit btn-primary" data-toggle="modal"
                                data-target="#editModal" data-idx="{{$index}}">编辑{{$index}}</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li onclick="prePage()" class="nav-pre">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!-- {{each navList}}
                    <li data-idx="$value" onclick="navClick"><a href="#">{{$value}}</a></li>
                    {{/each}} -->
                    <li onclick="nextPage()" class="nav-next">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <input type="text" id="navPageNum" value="{{pageNum}}">
            <input type="text" id="navPageCount" value="{{pageCount}}">
        </div>
        {{else}}
        <h1>查无此人</h1>
        {{/if}}
        <!-- 添加框 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">添加</h4>
                    </div>
                    <div class="modal-body">
                        <form action="/student/new" method="POST">
                            <div class="form-content">
                                <div class="form-left">
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">姓名:</label>
                                        <input type="text" required class="form-control" id="Name" name="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">班级:</label>
                                        <select id="SelectAddClass" class="form-control" name="class">
                                            <option value="7.1">7.1</option>
                                            <option value="7.2">7.2</option>
                                            <option value="7.3">7.3</option>
                                            <option value="8.1">8.1</option>
                                            <option value="8.2">8.2</option>
                                            <option value="8.3">8.3</option>
                                            <option value="8.4">8.4</option>
                                            <option value="9.1">9.1</option>
                                            <option value="9.2">9.2</option>
                                            <option value="9.3">9.3</option>
                                            <option value="9.4">9.4</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">考试类型:</label>
                                        <select id="SelectAddType" class="form-control" name="type">
                                            <option value="1">第一次月考</option>
                                            <option value="2">期中考试</option>
                                            <option value="3">第二次月考</option>
                                            <option value="4">期末考试</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">总分:</label>
                                        <input type="number" required class="form-control" id="TotalScore"
                                            name="totalScore">
                                    </div>
                                </div>
                                <div class="form-right">
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">语文分数:</label>
                                        <input type="number" class="form-control" id="Chinese" name="chinese">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">数学分数:</label>
                                        <input type="number" class="form-control" id="Math" name="math">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">英语分数:</label>
                                        <input type="number" class="form-control" id="English" name="english">
                                    </div>
                                    <div class="form-group">
                                        <label id="MathLabel" for="message-text" class="control-label">政治分数:</label>
                                        <input type="number" class="form-control" id="Politics" name="politics">
                                    </div>
                                    <div class="form-group">
                                        <label id="MathLabel" for="message-text" class="control-label">历史分数:</label>
                                        <input type="number" class="form-control" id="History" name="history">
                                    </div>
                                    <div class="form-group">
                                        <label id="GeographyLabel" for="message-text"
                                            class="control-label">地理分数:</label>
                                        <input type="number" class="form-control" id="Geography" name="geography">
                                    </div>
                                    <div class="form-group">
                                        <label id="PhysicsLabel" for="message-text" class="control-label">物理分数:</label>
                                        <input type="number" class="form-control" id="Physics" name="physics">
                                    </div>
                                    <div class="form-group">
                                        <label id="ChemistryLabel" for="message-text"
                                            class="control-label">化学分数:</label>
                                        <input type="number" class="form-control" id="Chemistry" name="chemistry">
                                    </div>
                                    <div class="form-group">
                                        <label id="BiologyLabel" for="message-text" class="control-label">生物分数:</label>
                                        <input type="number" class="form-control" id="Biology" name="biology">
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 编辑框 -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">编辑</h4>
                    </div>
                    <div class="modal-body">
                        <form action="/student/update" method="POST">
                            <div class="form-content">
                                <div class="form-left">
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">姓名:</label>
                                        <input type="text" required class="form-control form-name" id="EditName"
                                            name="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">班级:</label>
                                        <select id="SelectEditClass" class="form-control" name="class">
                                            <option value="7.1">7.1</option>
                                            <option value="7.2">7.2</option>
                                            <option value="7.3">7.3</option>
                                            <option value="8.1">8.1</option>
                                            <option value="8.2">8.2</option>
                                            <option value="8.3">8.3</option>
                                            <option value="8.4">8.4</option>
                                            <option value="9.1">9.1</option>
                                            <option value="9.2">9.2</option>
                                            <option value="9.3">9.3</option>
                                            <option value="9.4">9.4</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label">总分:</label>
                                        <input type="number" required class="form-control form-totalscore"
                                            id="EditTotalScore" name="totalScore">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">考试类型:</label>
                                        <select id="SelectEditType" class="form-control" name="type">
                                            <option value="1">第一次月考</option>
                                            <option value="2">期中考试</option>
                                            <option value="3">第二次月考</option>
                                            <option value="4">期末考试</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-right">
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">语文分数:</label>
                                        <input type="number" class="form-control form-chinese" id="EditChinese"
                                            name="chinese">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">数学分数:</label>
                                        <input type="number" class="form-control form-math" id="EditMath" name="math">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="control-label">英语分数:</label>
                                        <input type="number" class="form-control form-english" id="EditEnglish"
                                            name="english">
                                    </div>
                                    <div class="form-group">
                                        <label id="MathLabel" for="message-text" class="control-label">政治分数:</label>
                                        <input type="number" class="form-control form-politics" id="EditPolitics"
                                            name="politics">
                                    </div>
                                    <div class="form-group">
                                        <label id="MathLabel" for="message-text" class="control-label">历史分数:</label>
                                        <input type="number" class="form-control form-history" id="EditHistory"
                                            name="history">
                                    </div>
                                    <div class="form-group">
                                        <label id="EditGeographyLabel" for="message-text"
                                            class="control-label">地理分数:</label>
                                        <input type="number" class="form-control form-geography" id="EditGeography"
                                            name="geography">
                                    </div>
                                    <div class="form-group">
                                        <label id="EditPhysicsLabel" for="message-text"
                                            class="control-label">物理分数:</label>
                                        <input type="number" class="form-control form-physics" id="EditPhysics"
                                            name="physics">
                                    </div>
                                    <div class="form-group">
                                        <label id="EditChemistryLabel" for="message-text"
                                            class="control-label">化学分数:</label>
                                        <input type="number" class="form-control form-chemistry" id="EditChemistry"
                                            name="chemistry">
                                    </div>
                                    <div class="form-group">
                                        <label id="EditBiologyLabel" for="message-text"
                                            class="control-label">生物分数:</label>
                                        <input type="number" class="form-control form-biology" id="EditBiology"
                                            name="biology">
                                    </div>
                                </div>
                                <input class="form-sid" type="text" hidden name="sid">
                            </div>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Excel文件导入框 -->
        <div class="modal fade" id="ImportExcelModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">导入Excel表格</h4>
                    </div>
                    <div class="modal-body">
                        <form action="/upload" enctype="multipart/form-data" method="post">
                            <div class="form-group">
                                <input type="file" name="uploadFile">
                            </div>
                            <div class="form-group">
                                <button type="submit">提交</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</body>
<script src="../public/jquery/dist/jquery.min.js"></script>
<script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
    $(function () {
        var pageNum = parseInt($('#navPageNum').val())
        var pageCount = parseInt($('#navPageCount').val())
        let html = ''
        console.log(pageCount)
        for (let i = 1; i <= pageCount; i++) {
            if (i == pageNum) {
                html = '<li class="active"><a href="/admin?page=' + i + '">' + i + '</a></li>'
            } else {
                html = '<li><a href="/admin?page=' + i + '">' + i + '</a></li>'
            }
            $('.nav-next').before(html)
        }

        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var idx = button.data('idx') // Extract info from data-* attributes
            var modal = $(this)
            console.log(idx)
            var name = $('.student-table-tr').eq(idx).children('.student-table-td-name').text()
            var stuClass = $('.student-table-tr').eq(idx).children('.student-table-td-class').text()
            var stuChinese = $('.student-table-tr').eq(idx).children('.student-table-td-chinese').text()
            var stuMath = $('.student-table-tr').eq(idx).children('.student-table-td-math').text()
            var stuEnglish = $('.student-table-tr').eq(idx).children('.student-table-td-english').text()
            var stuPolitics = $('.student-table-tr').eq(idx).children('.student-table-td-politics').text()
            var stuHistory = $('.student-table-tr').eq(idx).children('.student-table-td-history').text()
            var stuGeography = $('.student-table-tr').eq(idx).children('.student-table-td-geography').text()
            var stuPhysics = $('.student-table-tr').eq(idx).children('.student-table-td-physics').text()
            var stuChemistry = $('.student-table-tr').eq(idx).children('.student-table-td-chemistry').text()
            var stuBiology = $('.student-table-tr').eq(idx).children('.student-table-td-biology').text()
            var stuTotalScore = $('.student-table-tr').eq(idx).children('.student-table-td-totalscore').text()
            var title = $('.student-table-tr').eq(idx).children('.student-table-td-title').text()
            var sid = $('.student-table-tr').eq(idx).children('.student-table-td-sid').text()

            modal.find('.form-name').val(name)
            modal.find('.form-group').val(stuClass)
            modal.find('.form-chinese').val(stuChinese)

            $('#SelectEditClass').val(stuClass)
            modal.find('.form-math').val(stuMath)
            modal.find('.form-english').val(stuEnglish)
            modal.find('.form-politics').val(stuPolitics)
            modal.find('.form-history').val(stuHistory)
            modal.find('.form-geography').val(stuGeography)
            modal.find('.form-physics').val(stuPhysics)
            modal.find('.form-chemistry').val(stuChemistry)
            modal.find('.form-biology').val(stuBiology)
            modal.find('.form-totalscore').val(stuTotalScore)
            modal.find('.form-title').val(title)
            modal.find('.form-sid').val(sid)

            $("#SelectEditType").find("option:contains('" + title + "')").attr("selected", true);
            // modal.find('.form-minGrade').val(minGrade)
            // modal.find('.form-id').val(id)
            console.log(name)
            console.log('当前点击的sid是', sid)

            if (stuClass.indexOf('7') != -1) {
                $('#EditPhysics').hide()
                $('#EditPhysicsLabel').hide()
                $('#EditChemistry').hide()
                $('#EditChemistryLabel').hide()
                $('#EditGeography').show()
                $('#EditGeographyLabel').show()
                $('#EditBiology').show()
                $('#EditBiologyLabel').show()
            } else if (stuClass.indexOf('8') != -1) {
                $('#EditChemistry').hide()
                $('#EditChemistryLabel').hide()
                $('#EditPhysics').show()
                $('#EditPhysicsLabel').show()
            }
            else if (stuClass.indexOf('9') != -1) {
                $('#EditGeography').hide()
                $('#EditGeographyLabel').hide()
                $('#EditBiology').hide()
                $('#EditBiologyLabel').hide()
                $('#EditPhysics').show()
                $('#EditPhysicsLabel').show()
                $('#EditChemistry').show()
                $('#EditChemistryLabel').show()
            }

        })

        $('#Physics').hide()
        $('#PhysicsLabel').hide()
        $('#Chemistry').hide()
        $('#ChemistryLabel').hide()

        // 添加学生弹框表单中班级选择框值改变事件
        $('#SelectAddClass').change(function () {
            let selVal = $('#SelectAddClass').val();
            if (selVal.indexOf('7') != -1) {
                $('#Physics').hide()
                $('#PhysicsLabel').hide()
                $('#Chemistry').hide()
                $('#ChemistryLabel').hide()
                $('#Geography').show()
                $('#GeographyLabel').show()
                $('#Biology').show()
                $('#BiologyLabel').show()
            } else if (selVal.indexOf('8') != -1) {
                $('#Chemistry').hide()
                $('#ChemistryLabel').hide()
                $('#Physics').show()
                $('#PhysicsLabel').show()
                $('#Geography').show()
                $('#GeographyLabel').show()
                $('#Biology').show()
                $('#BiologyLabel').show()
            }
            else if (selVal.indexOf('9') != -1) {
                $('#Geography').hide()
                $('#GeographyLabel').hide()
                $('#Biology').hide()
                $('#BiologyLabel').hide()
                $('#Physics').show()
                $('#PhysicsLabel').show()
                $('#Chemistry').show()
                $('#ChemistryLabel').show()
            }
            console.log($('#SelectAddClass').val())
        })


        // 编辑学生弹框表单中班级选择框值改变事件
        $('#SelectEditClass').change(function () {
            let selVal = $('#SelectEditClass').val();
            if (selVal.indexOf('7') != -1) {
                $('#EditPhysics').hide()
                $('#EditPhysicsLabel').hide()
                $('#EditChemistry').hide()
                $('#EditChemistryLabel').hide()
                $('#EditGeography').show()
                $('#EditGeographyLabel').show()
                $('#EditBiology').show()
                $('#EditBiologyLabel').show()
            } else if (selVal.indexOf('8') != -1) {
                $('#EditChemistry').hide()
                $('#EditChemistryLabel').hide()
                $('#EditPhysics').show()
                $('#EditPhysicsLabel').show()
            }
            else if (selVal.indexOf('9') != -1) {
                $('#EditGeography').hide()
                $('#EditGeographyLabel').hide()
                $('#EditBiology').hide()
                $('#EditBiologyLabel').hide()
                $('#EditPhysics').show()
                $('#EditPhysicsLabel').show()
                $('#EditChemistry').show()
                $('#EditChemistryLabel').show()
            }
            console.log($('#SelectEditClass').val())
        })
    })

    function navClick() {
        console.log(2333)
    }

    // 上一页按钮点击事件
    function prePage() {
        let currentPage = parseInt($('#navPageNum').val())
        let prePage = currentPage < 2 ? 1 : currentPage - 1
        console.log('上一页的页码是', prePage)

        window.location.href = "/admin?page=" + prePage
    }

    // 下一页按钮点击事件
    function nextPage() {
        let currentPage = parseInt($('#navPageNum').val())
        let totalPage = parseInt($('#navPageCount').val())
        let nextPage = currentPage == totalPage ? totalPage : currentPage + 1
        console.log('上一页的页码是', nextPage)

        window.location.href = "/admin?page=" + nextPage
    }
</script>

</html>